<template>
  <div>
    <!-- 图片上传 -->
    <h2 class="title">请选择商品封面</h2>
    <el-upload
      action="http://localhost:9000/m1/upLoadImg"
      list-type="picture-card"
      ref="upload"
      :auto-upload="false"
      :file-list="fileList"
      :on-change="changeImg"
      name="coverImg"
    >
      <i slot="default" class="el-icon-plus"></i>
      <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <i class="el-icon-download"></i>
          </span>
          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>

    <!-- 品牌选择 -->
    <el-select v-model="value" placeholder="请选择" @change="changeValue">
      <el-option v-for="item in mongoList" :key="item" :label="item" :value="item"></el-option>
    </el-select>
    <el-input v-model="data.title" placeholder="标题"></el-input>
    <el-input v-model="data.detailTitle" placeholder="详细标题"></el-input>
    <el-input v-model="data.price" placeholder="价格"></el-input>
    <el-input v-model="data.sold" placeholder="销量"></el-input>
    <el-input v-model="data.detailMsg[0].shoeName" placeholder="全称"></el-input>
    <el-input v-model="data.detailMsg[0].shoeCode" placeholder="货架号"></el-input>
    <el-input v-model="data.detailMsg[0].shoeFor" placeholder="适合性别"></el-input>
    <el-input v-model="data.detailMsg[0].sizeChart" placeholder="适合性别"></el-input>
    <el-input v-model="data.detailMsg[0].detailImg" placeholder="适合性别"></el-input>

    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </div>
</template>

<script>
import { mongoList } from "../../../assets/data/data";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      fileList: [],
      mongoList: [],
      value: "",
      data: {
        img: "",
        title: "",
        detailTitle: "",
        price: "",
        sold: "",
        detailMsg: [
          {
            shoeName: "",
            brand: "",
            shoeCode: "",
            shoeFor: "",
            sizeChart: "",
            detailImg: []
          }
        ]
      }
    };
  },
  mounted() {
    this.mongoList = mongoList;
  },
  methods: {
    // 图片上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file) {
      console.log(file);
      console.log(this.fileList);
      this.$refs.upload.handleRemove(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      console.log(this.fileList);
    },
    handleDownload(file) {
      console.log(file);
    },
    changeImg(file, filelist) {
      if (filelist.length > 1) {
        this.$refs.upload.handleRemove(file);
        this.$message({
          message: "封面最多上传一张图片",
          type: "error"
        });
      }else{
        this.fileList = filelist;
      }
    },

    // 下拉选框
    changeValue(e) {
      console.log(e);
    }
  }
};
</script>

<style scoped>
.title {
  text-align: start;
}
</style>